<template>
    <div>
    <!-- 
      批量导入数据对话框
     -->
      <el-dialog title="批量导入" width='500px' :close-on-click-modal='false' :destroy-on-close='true'  :visible.sync="batchAddDialog" @close="closeUploadDialog">
        <el-upload
          ref="batchAddUpload"
          class="upload-demo"
          :action="actionUrl"
          :headers="headersParam"
          :data="dataParam"
          multiple
          :limit="1"
          drag
          :on-success="handleSuccess"
          :auto-upload="false"
          :file-list="fileList">
        <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传.xlsx文件，且不超过5M</div>
        </el-upload>
        <div slot="footer" class="dialog-footer">
          <div v-if="errorMsg" style="padding:0 0 10px 0; text-align:left" v-html="errorMsg" >
          </div>
          <el-button size="small" type="primary" id="copyBtn" @click="handleImportExcel($event)" data-clipboard-target="#pathText">开始导入</el-button>
          <el-button size="small" @click="batchAddDialog = false;fileList=[]">取 消</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
import {mapGetters} from 'vuex';
import {getToken} from '@/util/auth'
export default {
  name: 'upload-excel',
  props: {
    actionUrl:{
      type: String
    },
  },
  data() {
    return {
      //批量导入
      batchAddDialog: false,
      headersParam:{},
      dataParam:{},
      fileList: [],
      errorMsg: ''
    };
  },
  computed: {
    ...mapGetters(['website','orgTree','genOrgTree','userInfo','permission','projectList'])
  },
  methods: {
    /**
     * 批量导入Excel
     */
    handleImportExcel(){
      this.$refs.batchAddUpload.submit();
    },
    /**
     * 导入成功
     */
    handleSuccess(response, file, fileList){
      this.errorMsg = '';
      this.$console.log('response:',response);
      this.$console.log('fileList:',fileList);
      if(response.head.respCode == 'S0000'){
        this.$message({
          type: 'success',
          message: '处理成功！'
        });
      }
      else{
        file.status = 'error';
        this.errorMsg = '';
        for(var key in response.head.respMsg){
          this.errorMsg += '<div>'+key+':'+'<span style="font-size:12px;color:#ff0000">'+response.head.respMsg[key]+'</span></div>'
        }
      }
    },
    /**
     * 打开对话框
     */
    openUploadDialog(){
      this.batchAddDialog = true;
    },
    /**
     * 关闭对话框
     */
    closeUploadDialog(){
      this.batchAddDialog = false;
      this.fileList = [];
      this.errorMsg = '';
    }
  },
  created() {
    this.headersParam={
      'Authorization': 'bearer ' + getToken(),
      'UserId': this.userInfo.userId,
      'UserSign':'uploadFile',
      'remote': 'no',
      'userName': this.userInfo.userName,
      'realName': encodeURIComponent(this.userInfo.realName),
      'tenantId': this.userInfo.tenantId 
    }
  }
};
</script>
<style>

</style>